<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">


            <!-- 分析 -->
            <!-- 监听文本框数据的改变  -->
            <input type="text" v-model="firstname">+
            <input type="text" v-model="demoname">+
            <input type="text" v-model="lastname">=
            <input type="text" v-model="fullname">

            <p>{{ fullname }}</p>
            <p>{{ fullname }}</p>
            <p>{{ fullname }}</p>
            <p>{{ fullname }}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    firstname: '',
                    lastname: '',
                    demoname: ''
                },
                methods:{
                   
                },
                computed: {
                    //在 computed中 可以定义一些属性 这些属性 叫做计算属性 计算属性的本质就是一个方法 只不过我们在使用这些计算属性的时候 是把他们的名称 直接当做属性来使用的 并不会吧计算属性当做方法调用

                    // 计算属性在引用的时候 一定不要加()去调用 直接当做普通属性来使用就好了 注意:只要计算属性 这个function 内部 所用到的任何data的数据发生了变化 就会立即重新 渲染 
                    // 注意 计算属性的结果 会被缓存起来的 方便下次直接使用 如果我们计算属性方法中 所依赖的任何数据 都没有变化过 就不会重新计算数据 也就不会渲染
                    'fullname': function () {
                        console.log('1')
                        return this.firstname+this.demoname + this.lastname
                    }

                }
            })
        </script>
    </body>
</html>